<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Create a Parralax Website using Stellar.js</title>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<script type="text/javascript" src="js/jquery.stellar.min.js"></script>
<script type="text/javascript" src="js/waypoints.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

</head>

<body>

	<ul class="navigation">
		<li data-slide="1">Slide 1</li>
		<li data-slide="2">Slide 2</li>
		<li data-slide="3">Slide 3</li>
		<li data-slide="4">Slide 4</li>
	</ul>



          
	<img class="envatologo" src="images/zurich/slide1/weihnachten_zurich1.jpg">
	

	<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
		<div class="wrapper">

			<img src="images/zurich/slide1/Lake1.jpg" style="width: 180px; height: 180px"  data-stellar-ratio="3" data-stellar-vertical-offset="-55"alt="">
			<img src="images/zurich/slide1/lake2.jpg" style="width: 150px; height: 150px" data-stellar-ratio="1" data-stellar-vertical-offset="-102"alt="">
			<img src="images/zurich/slide1/lake3.jpg" style="width: 140px; height: 140px" data-stellar-ratio="1.5" data-stellar-vertical-offset="-53"alt="">
			<img src="images/zurich/slide1/lake4.jpeg" style="width: 120px; height: 120px" data-stellar-ratio="2.7" data-stellar-vertical-offset="-25"alt="">
			<img src="images/zurich/slide1/lake5.jpg" style="width: 150px; height: 150px" data-stellar-ratio="3" data-stellar-vertical-offset="-55"alt="">
			<img src="images/zurich/slide1/lake6.jpg" style="width: 130px; height: 130px" data-stellar-ratio="1" data-stellar-vertical-offset="-102"alt="">
			<img src="images/zurich/slide1/lake7.JPG" style="width: 150px; height: 120px" data-stellar-ratio="1.5" data-stellar-vertical-offset="-53"alt="">
			<img src="images/zurich/slide1/lake8.jpg" style="width: 140px; height: 110px" data-stellar-ratio="2.7" data-stellar-vertical-offset="-25"alt="">	

		</div>
		<a class="button" data-slide="2" title=""></a>

	</div><!--End Slide 1-->



	<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5">
		<div class="wrapper">

			<img src="images/zurich/slide2/eth1.jpg" style="width: 180px; height: 180px"  data-stellar-ratio="3" data-stellar-vertical-offset="-55"alt="">
			<img src="images/zurich/slide2/eth2.jpg" style="width: 150px; height: 150px" data-stellar-ratio="1" data-stellar-vertical-offset="-102"alt="">
			<img src="images/zurich/slide2/eth3.jpg" style="width: 140px; height: 140px" data-stellar-ratio="1.5" data-stellar-vertical-offset="-53"alt="">
			<img src="images/zurich/slide2/eth4.jpg" style="width: 120px; height: 120px" data-stellar-ratio="2.7" data-stellar-vertical-offset="-25"alt="">
			<img src="images/zurich/slide2/eth5.jpg" style="width: 150px; height: 150px" data-stellar-ratio="3" data-stellar-vertical-offset="-55"alt="">
			<img src="images/zurich/slide2/eth6.jpg" style="width: 130px; height: 130px" data-stellar-ratio="1" data-stellar-vertical-offset="-102"alt="">
			<img src="images/zurich/slide2/eth7.jpg" style="width: 150px; height: 120px" data-stellar-ratio="1.5" data-stellar-vertical-offset="-53"alt="">
			<img src="images/zurich/slide2/eth8.jpg" style="width: 140px; height: 110px" data-stellar-ratio="2.7" data-stellar-vertical-offset="-25"alt="">	

		</div>

		<span class="slideno">Slide 2</span>
		<a class="button" data-slide="3" title=""></a>

	</div><!--End Slide 2-->





	<div class="slide" id="slide3" data-slide="3" data-stellar-background-ratio="0.5">
		<div class="wrapper">
		
			<img src="images/zurich/slide3/history1.jpg" style="width: 180px; height: 180px"  data-stellar-ratio="3" data-stellar-vertical-offset="-55"alt="">
			<img src="images/zurich/slide3/history2.jpg" style="width: 150px; height: 150px" data-stellar-ratio="1" data-stellar-vertical-offset="-102"alt="">
			<img src="images/zurich/slide3/history3.jpg" style="width: 140px; height: 140px" data-stellar-ratio="1.5" data-stellar-vertical-offset="-53"alt="">
			<img src="images/zurich/slide3/history4.jpg" style="width: 120px; height: 120px" data-stellar-ratio="2.7" data-stellar-vertical-offset="-25"alt="">
			<img src="images/zurich/slide3/history5.jpg" style="width: 150px; height: 150px" data-stellar-ratio="3" data-stellar-vertical-offset="-55"alt="">
			<img src="images/zurich/slide3/history6.jpg" style="width: 130px; height: 130px" data-stellar-ratio="1" data-stellar-vertical-offset="-102"alt="">
			<img src="images/zurich/slide3/history7.jpg" style="width: 150px; height: 120px" data-stellar-ratio="1.5" data-stellar-vertical-offset="-53"alt="">
			<img src="images/zurich/slide3/history8.jpg" style="width: 140px; height: 110px" data-stellar-ratio="2.7" data-stellar-vertical-offset="-25"alt="">	
		</div>

		<span class="slideno">Slide 3</span>
		<a class="button" data-slide="4" title=""></a>

	</div><!--End Slide 3-->






	<div class="slide" id="slide4" data-slide="4" data-stellar-background-ratio="0">
		

		<span class="slideno">Slide 4</span>
		<span class="parallaxbg">Use the parallax effects on background images too!</span>

	</div><!--End Slide 4-->


			








</body>
</html>
